<template>
  <div>
    <div class="db-outer1" v-for="(ele,i) of arr1" :key="i">
      <div class="db-middle">
        <div class="db-floor">
          <h2 class="floors-h2">完本畅销</h2>
          <div :id="`third-carousel${i}`" class="carousel slide db-ring">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="d-flex justify-content-between">
                  <div
                    class="db-box1"
                    v-for="(ele, index) of channelBook"
                    :key="index"
                  >
                    <div class="book-cover2">
                      <a href="#" class="book-cover3 d-block"
                        ><img :src="ele.imgPath" alt="" class="db-book-img"
                      /></a>
                    </div>
                    <div class="info">
                      <span class="d-block box-span1">{{ ele.book_name }}</span>
                      <a href="#" class="box-a">
                        <span class="d-block box-span2">{{ ele.writer }}</span>
                      </a>
                      <span class="d-block box-span3"
                        >{{ ele.info }}</span
                      >
                      <span>9.8</span>
                      <a href="#" class="db-aa">言情</a>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="carousel-item"
                v-for="(ele, index) of arr1"
                :key="index"
              >
                <div class="d-flex justify-content-between">
                  <div
                    class="db-box1"
                    v-for="(ele, index) of channelBook2"
                    :key="index"
                  >
                    <div class="book-cover2">
                      <a href="#" class="book-cover3 d-block"
                        ><img :src="ele.imgPath" alt="" class="db-book-img"
                      /></a>
                    </div>

                    <div class="info">
                      <span class="d-block box-span1">{{ ele.book_name }}</span>
                      <a href="#" class="box-a">
                        <span class="d-block box-span2">{{ ele.writer }}</span>
                      </a>
                      <span class="d-block box-span3"
                        >{{ ele.info }}</span
                      >
                      <span>9.8</span>
                      <a href="#" class="db-aa">言情</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button
              class="carousel-control-prev db-btn1"
              type="button"
              :data-target="`#third-carousel${i}`"
              data-slide="prev"
            >
              <span
                class="carousel-control-prev-icon"
                aria-hidden="true"
              ></span>
              <span class="sr-only">Previous</span>
            </button>
            <button
              class="carousel-control-next db-btn2"
              type="button"
              :data-target="`#third-carousel${i}`"
              data-slide="next"
            >
              <span
                class="carousel-control-next-icon"
                aria-hidden="true"
              ></span>
              <span class="sr-only">Next</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: "./image/books/1_3.jpg",
      arr1: [1, 2],
      arr2: [1, 2, 3, 4, 5],
    };
  },
  props:["channelBook", "channelBook2"]
};
</script>
<style lang="scss">
// 每层楼左上角名字
.floors-h2 {
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
}
// 每层轮播的小说 div
.db-box1 {
  width: 170px;
  height: 370px;
  padding: 40px 20px 0;
}
// 轮播小说名
.box-span1 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 轮播作者名
.box-a {
  color: inherit;
  cursor: pointer;
  .box-span2 {
    font-size: 12px;
    color: #777;
  }
}
.box-a:hover > .box-span2 {
  color: rgb(36, 180, 206);
}
a:hover {
  text-decoration: none;
}
//轮播小说介绍
.box-span3 {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 兼容性 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.db-middle:hover .db-btn1 {
  transform: translate(100px, 0);
}

.db-middle:hover .db-btn2 {
  transform: translate(-100px, 0);
}

.db-middle:hover button {
  transition: 0.5s linear;
}

.db-middle {
  width: 100%;
  min-width: 1320px;
  margin: 0 auto;
}
.db-floor {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
  box-sizing: content-box;
  margin-right: auto;
  margin-left: auto;
  padding-right: 60px;
  padding-left: 60px;
}
.book-cover2 {
  position: relative;
  margin-bottom: 10px;
}

.book-cover2 .book-cover3:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 180px;
  background-color: rgba(0, 0, 0, 0.15);
}

.book-cover2 .book-cover3 img {
  width: 120px;
  height: 180px;
}
.db-aa {
  font-size: 12px;
  line-height: 16px;
  color: #777;
}

.db-aa:hover {
  color: #24b4ce;
}

.db-ring .db-btn1 {
  left: -150px;
}

.db-ring .db-btn2 {
  right: -150px;
}

.db-ring:hover > button {
  background-color: #389eac;
}

.db-middle:hover .db-btn1 {
  transform: translate(100px, 0);
}

.db-middle:hover .db-btn2 {
  transform: translate(-100px, 0);
}

.db-middle:hover button {
  transition: 0.5s linear;
}
.db-ring {
  position: relative;
}

.db-ring button {
  position: absolute;
  margin-top: 130px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: rgba(56, 158, 172, 0);
  transform: translate(0, 0);
}
</style>